<script setup>
import {
  costCalculate,
  warehouse,
  destination,
  timely,
  cargoCategory,
  selfPickupPoint
} from '@/api/modules/cost-calculate.js'
import { ElMessage } from 'element-plus'
import { nextTick, watch } from 'vue'

const warehouseList = ref([])
const destinationList = ref([])
const timelyList = ref([])
const cargoCategoryList = ref([])
const selfPickupPointList = ref([])
// 费用类型(0送货价格 1保价手续费 2包税价格 3大客户报价 4代付手续费 5自提价格)
const feeTypeList = ref([
  {
    label: '送货价格',
    value: 0
  },
  {
    label: '保价手续费',
    value: 1
  },
  {
    label: '包税价格',
    value: 2
  },
  {
    label: '大客户报价',
    value: 3
  },
  {
    label: '代付手续费',
    value: 4
  },
  {
    label: '自提价格',
    value: 5
  }
])
const formDom = ref()
const form = ref({
  calculateWeight: 0,
  cargoTypeId: '',
  destinationId: '',
  isOfficialWebsite: true,
  selfPickupPointId: '',
  timeEfficiencyId: '',
  feeType: 0,
  warehouseId: ''
})
const formRules = ref({
  warehouseId: [{ required: true, message: 'Please input Activity name', trigger: 'change' }],
  feeType: [{ required: true, message: 'Please input Activity name', trigger: 'change' }],
  timeEfficiencyId: [{ required: true, message: 'Please input Activity name', trigger: 'change' }],
  cargoTypeId: [{ required: true, message: 'Please input Activity name', trigger: 'change' }],
  calculateWeight: [{ required: true, message: 'Please input Activity name', trigger: 'blur' }]
  // selfPickupPointId:[{ required: true, message: 'Please input Activity name', trigger: 'blur' }],
  // destinationId: [{ required: true, message: 'Please input Activity name', trigger: 'blur' }],
})
onMounted(() => {
  warehouse().then(({ rows }) => {
    warehouseList.value = rows
  })
  destination().then(({ rows }) => {
    destinationList.value = rows
  })
  timely().then(({ rows }) => {
    timelyList.value = rows
  })
  cargoCategory().then(({ rows }) => {
    cargoCategoryList.value = rows
  })
  selfPickupPoint().then(({ rows }) => {
    selfPickupPointList.value = rows
  })
})

// 物流查询
const costCalInfo = ref()
const costCalculateFn = () => {
  console.log(1,form.value.feeType)
  console.log(2,Number(form.value.feeType))
  if (  Number(form.value.feeType) === 5 && !form.value.selfPickupPointId) {
      return ElMessage.error('请选择自提点')
    }
  if (  Number(form.value.feeType) !== 5 && !form.value.destinationId) {
      return ElMessage.error('请选择目的地')
    }
  formDom.value.validate((valid, fields) => {
    if (valid) {
      costCalculate(form.value)
        .then((res) => {
          costCalInfo.value = res.data
          ElMessage.success('测算成功')
        })
        .catch((err) => {
          console.log('无测算', err)
          costCalInfo.value = []
        })
    } else {
      console.log('error submit!', fields)
    }
  })
}

watch(
  () => form.value.feeType,
  (value) => {
    console.log('watch',value)
    //费用类型为自提点（值为5）的时候只能选自提点，不能选目的地，不为5时只能选目的地，不能选自提点
    if (value === 5) {
      form.value.destinationId = ''
    } else {
      form.value.selfPickupPointId = ''
    }
  }
)
</script>

<template>
  <div
    class="h-[260px] bg-[url(@/assets/img/costCalculate/track02_banner.jpg)] bg-cover bg-no-repeat bg-[#f8f8f9] relative"
  >
    <div class="absolute top-[215px] left-1/2 -translate-x-1/2">
      <div class="w-[100vw] bg-white shadow-xl py-[20px] px-[20px] lg:w-[1024px]">
        <div class="mb-[40px] h-[56px] text-[18px] leading-[56px]" style="color: #333">
          {{ $t('content.calculate.freeComputed') }}
        </div>
        <div class="flex justify-between items-center text-[#666] text-[14px] leading-[32px]">
          <el-form
            ref="formDom"
            :inline="true"
            class="demo-form-inline grid grid-cols-1 lg:grid-cols-3 gap-3"
            :model="form"
            :rules="formRules"
            label-width="120px"
          >
            <el-form-item :label="$t('content.calculate.warehouse')" prop="warehouseId">
              <el-select
                v-model="form.warehouseId"
                :placeholder="
                  $t('common.pleaseSelect') + '&nbsp;' + $t('content.calculate.warehouse')
                "
                clearable
              >
                <el-option
                  v-for="item in warehouseList"
                  :key="item.id"
                  :label="item.warehouseName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('content.calculate.timeEfficiency')" prop="timeEfficiencyId">
              <el-select
                v-model="form.timeEfficiencyId"
                :placeholder="
                  $t('common.pleaseSelect') + '&nbsp;' + $t('content.calculate.timeEfficiency')
                "
                clearable
              >
                <el-option
                  v-for="item in timelyList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('content.calculate.cargoType')" prop="cargoTypeId">
              <el-select
                v-model="form.cargoTypeId"
                :placeholder="
                  $t('common.pleaseSelect') + '&nbsp;' + $t('content.calculate.cargoType')
                "
                clearable
              >
                <el-option
                  v-for="item in cargoCategoryList"
                  :key="item.id"
                  :label="item.cargoName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('content.calculate.feeType')" prop="feeType">
              <el-select
                v-model="form.feeType"
                :placeholder="
                  $t('common.pleaseSelect') + '&nbsp;' + $t('content.calculate.feeType')
                "
              >
                <el-option
                  v-for="item in feeTypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              v-if="form.feeType === 5"
              :label="$t('content.calculate.selfPickupPoint')"
              prop="selfPickupPointId"
            >
              <el-select
                v-model="form.selfPickupPointId"
                :placeholder="
                  $t('common.pleaseSelect') + '&nbsp;' + $t('content.calculate.selfPickupPoint')
                "
                clearable
              >
                <el-option
                  v-for="item in selfPickupPointList"
                  :key="item.id"
                  :label="item.selfPickupPointName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item v-else :label="$t('content.calculate.destination')" prop="destinationId">
              <el-select
                v-model="form.destinationId"
                :placeholder="
                  $t('common.pleaseSelect') + '&nbsp;' + $t('content.calculate.destination')
                "
                clearable
              >
                <el-option
                  v-for="item in destinationList"
                  :key="item.destinationId"
                  :label="item.destinationName"
                  :value="item.destinationId"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              :label="$t('content.calculate.weight')"
              :rules="[
                {
                  required: true,
                  message: $t('common.pleaseInput') + '&nbsp;' + $t('content.calculate.weight')
                },
                {
                  type: 'number',
                  message:
                    $t('common.pleaseInput') +
                    $t('content.calculate.weight') +
                    $t('content.calculate.format')
                }
              ]"
              prop="calculateWeight"
            >
              <el-input-number
                :min="0"
                :precision="2"
                v-model.number="form.calculateWeight"
                :placeholder="$t('content.calculate.weight')"
              >
                <template #suffix>
                  <span> KG</span>
                </template>
              </el-input-number>
            </el-form-item>
           
          </el-form>
        </div>
        <div class="text-center">   <el-button class="w-[300px] mt-4" color="#e70012" size="large" @click="costCalculateFn">{{
              $t('common.find')
            }}</el-button></div>
      </div>
    </div>
  </div>
  <div
    class="result mt-[260px] flex justify-center pb-[30px] px-[15px] sm:mt-[544px] md:mt-[290px] lg:mt-[253px] text_mt"
  >
    <div v-if="costCalInfo" class="w-full lg:w-[1024px]">
      <div>
        <el-table :data="costCalInfo" border stripe style="width: 100%">
          <el-table-column prop="warehouseName" :label="$t('content.calculate.warehouse')" />
          <el-table-column prop="destinationName" :label="$t('content.calculate.destination')" />
          <el-table-column
            prop="timeEfficiencyName"
            :label="$t('content.calculate.timeEfficiency')"
          />
          <el-table-column
            prop="freight"
            :label="`${$t('content.calculate.freight')}(${$t('content.calculate.unit')}￥)`"
          />
          <el-table-column
            prop="surcharge"
            :label="`${$t('content.calculate.surcharge')}(${$t('content.calculate.unit')}￥)`"
          />
          <el-table-column
            prop="extraLongFee"
            :label="`${$t('content.calculate.extraLongFee')}(${$t('content.calculate.unit')}￥)`"
          />
          <el-table-column
            prop="chargedWeight"
            :label="`${$t('content.calculate.chargedWeight')}(${$t('content.calculate.unit')} KG)`"
          />
          <el-table-column prop="cargoName" :label="$t('content.calculate.cargoName')" />
        </el-table>
      </div>
    </div>
    <div v-else class="w-full lg:w-[1024px] px-[20px] py-[10px] text-center">
      <div>
        <div class="flex justify-center">
          <img src="@/assets/img/costCalculate/icon_01.jpg" alt="" />
        </div>
        <div>
          <p>{{ $t('content.calculate.findTip1') }}</p>
          <p>{{ $t('content.calculate.findTip2') }}</p>
        </div>
      </div>
    </div>
  </div>
  <div
    class="pt-[23px] pb-[78px] bg-[#f6f4f7] w-full lg:w-[1024px] px-[15px] m-auto relative mb-10"
  >
    <div class="w-full h-[99px] overflow-hidden">
      <span class="text-[18px] text-[#333] leading-[99px] float-left">{{
        $t('content.calculate.usuallyQuestion')
      }}</span>
      <span
        @click="$router.push({ name: 'help' })"
        class="text-[#e70012] text-[14px] pr-[43px] float-right leading-[99px] cursor-pointer"
        >more&gt;&gt;</span
      >
    </div>
    <ul
      class="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-2 gap-3 gap-30"
    >
      <li class="w-full">
        <h3>{{ $t('content.calculate.question1') }}</h3>
        <p>{{ $t('content.calculate.reply1') }}</p>
      </li>
      <li class="w-full">
        <h3>{{ $t('content.calculate.question2') }}</h3>
        <p>{{ $t('content.calculate.reply2') }}</p>
      </li>
      <li class="w-full">
        <h3>{{ $t('content.calculate.question3') }}</h3>
        <p>{{ $t('content.calculate.reply3') }}</p>
      </li>
      <li class="w-full">
        <h3>{{ $t('content.calculate.question4') }}</h3>
        <p>{{ $t('content.calculate.reply4') }}</p>
      </li>
    </ul>
    <div
      class="display_none w-[1px] h-[245px] bg-[#c6c6c6] absolute top-[140px] left-1/2 -translate-x-1/2"
    />
  </div>
</template>

<style scoped  >
.common:hover p {
  background: #1268bb;
  color: white;
}

.el-form-item {
  margin: 0 0 10px !important;
}

.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
.grid li {
  margin-right: 98px;
  float: left;
  margin-bottom: 20px;
}
li h3 {
  font-size: 14px;
  color: #333335 !important;
  line-height: 20px;
  font-weight: normal;
}
li p {
  font-size: 14px;
  color: #989898;
  line-height: 25px;
  margin-top: 10px;
}

@media (min-width: 0px) and (max-width: 768px) {
  .display_none {
    display: none;
  }
  .demo-form-inline .el-input {
    --el-input-width: 70vw;
  }

  .demo-form-inline .el-select {
    --el-select-width: 70vw;
  }
}
@media (min-width: 769px) {
  .display_none {
    display: block;
  }
}
@media (min-width: 0px) and (max-width: 640px) {
  .text_mt {
    margin-top: 546px;
  }
}
p {
  white-space: pre-wrap !important;
}
</style>
